<!DOCTYPE html>
<html lang=-->
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="&amp;#160; 转载：Web前端开发-Web前端工程师 » 使用Emmet(前身Zen Coding)加速Web前端开发 Emmet插件以前被称作为Zen Coding，是一个文本编辑器的插件，它可以帮助您快速编写HTML和CSS代码，从而加速Web前端开发。早在2009年，Sergey Chikuyonok写过一篇文章，提出编写HTML和CSS的新方法。这一革命性的插件指的就是Zen Coding">
<meta name="keywords" content="网建随记">
<meta property="og:type" content="article">
<meta property="og:title" content="使用Emmet(前身Zen Coding)加速Web前端开发">
<meta property="og:url" content="https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/index.html">
<meta property="og:site_name" content="iiitoo">
<meta property="og:description" content="&amp;#160; 转载：Web前端开发-Web前端工程师 » 使用Emmet(前身Zen Coding)加速Web前端开发 Emmet插件以前被称作为Zen Coding，是一个文本编辑器的插件，它可以帮助您快速编写HTML和CSS代码，从而加速Web前端开发。早在2009年，Sergey Chikuyonok写过一篇文章，提出编写HTML和CSS的新方法。这一革命性的插件指的就是Zen Coding">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-1.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-dtd.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-2.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-3.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-4.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-climb-up.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-5.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-21.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-6.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-22.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-23.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/emment-1.jpg">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-13.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-14.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-15.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-16.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-17.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-18.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-19.gif">
<meta property="og:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-20.gif">
<meta property="og:updated_time" content="2017-05-12T22:14:09.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="使用Emmet(前身Zen Coding)加速Web前端开发">
<meta name="twitter:description" content="&amp;#160; 转载：Web前端开发-Web前端工程师 » 使用Emmet(前身Zen Coding)加速Web前端开发 Emmet插件以前被称作为Zen Coding，是一个文本编辑器的插件，它可以帮助您快速编写HTML和CSS代码，从而加速Web前端开发。早在2009年，Sergey Chikuyonok写过一篇文章，提出编写HTML和CSS的新方法。这一革命性的插件指的就是Zen Coding">
<meta name="twitter:image" content="http://www.zjgsq.com/wp-content/uploads/2013/12/element-1.gif">
        
            
            
            
        <link rel="shortcut icon" href="/images/favicon.ico">
            
              
              
              
        <link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192">
              
              
              
              
        <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
              
              
        
        <!-- title -->
        <title>
        使用Emmet(前身Zen Coding)加速Web前端开发
        </title>
        <!-- styles -->
        <link rel="stylesheet" href="/css/style.css">
        <!-- styles -->
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_lb4f241dchqcl3di.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/lib/meslo-LG/styles.css">
<link rel="stylesheet" href="/lib/justified-gallery/justifiedGallery.min.css">

        <!-- rss -->
        
        
        <link rel="alternate" href="/atom.xml" title="iiitoo" type="application/atom+xml" />
                                                                                                    
</head>

<body>
    
      <div id="header-post">
  <a id="menu-icon" href="#"><i class="fa fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#"><i class="fa fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fa fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
         
          <li><a href="/">首</a></li>
         
          <li><a href="/about/">关于这</a></li>
         
          <li><a href="/reading/">读什么</a></li>
         
          <li><a href="/book/">写本书</a></li>
         
          <li><a href="/categories/blog/">写博客</a></li>
         
          <li><a href="/categories/learning/">做什么</a></li>
        
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" href="/2014/11/29/Pure中文版/"><i class="fa fa-chevron-left" aria-hidden="true" onmouseover='$("#i-prev").toggle();' onmouseout='$("#i-prev").toggle();'></i></a></li>
        
        
        <li><a class="icon" href="/2014/10/18/自我规则/"><i class="fa fa-chevron-right" aria-hidden="true" onmouseover='$("#i-next").toggle();' onmouseout='$("#i-next").toggle();'></i></a></li>
        
        <li><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa fa-chevron-up" aria-hidden="true" onmouseover='$("#i-top").toggle();' onmouseout='$("#i-top").toggle();'></i></a></li>
        <li><a class="icon" href="#"><i class="fa fa-share-alt" aria-hidden="true" onmouseover='$("#i-share").toggle();' onmouseout='$("#i-share").toggle();' onclick='$("#share").toggle();return false;'></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">Previous post</span>
      <span id="i-next" class="info" style="display:none;">Next post</span>
      <span id="i-top" class="info" style="display:none;">Back to top</span>
      <span id="i-share" class="info" style="display:none;">Share post</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
    <!-- <li class="social-share share-component" data-sites="facebook"></li> -->
    <li class="social-share share-component" data-sites="wechat"></li>
    <li class="social-share share-component" data-sites="qq"></li>
    <li class="social-share share-component" data-sites="twitter"></li>
    <li class="social-share share-component" data-sites="weibo"></li>
    <li class="social-share share-component" data-sites="tencent"></li>
    <li class="social-share share-component" data-sites="qzone"></li>
    <li class="social-share share-component" data-sites="douban"></li>
    <li class="social-share share-component" data-sites="diandian"></li>
    <li class="social-share share-component" data-sites="google"></li>
    <li class="social-share share-component" data-sites="linkedin"></li>
    <li class="social-share share-component" data-sites="qzone"></li>
    <!-- <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&title=使用Emmet(前身Zen Coding)加速Web前端开发"><i class="fa fa-linkedin " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&is_video=false&description=使用Emmet(前身Zen Coding)加速Web前端开发"><i class="fa fa-pinterest " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="mailto:?subject=使用Emmet(前身Zen Coding)加速Web前端开发&body=Check out this article: https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/"><i class="fa fa-envelope " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="https://getpocket.com/save?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&title=使用Emmet(前身Zen Coding)加速Web前端开发"><i class="fa fa-get-pocket " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://reddit.com/submit?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&title=使用Emmet(前身Zen Coding)加速Web前端开发"><i class="fa fa-reddit " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://www.stumbleupon.com/submit?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&title=使用Emmet(前身Zen Coding)加速Web前端开发"><i class="fa fa-stumbleupon " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://digg.com/submit?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&title=使用Emmet(前身Zen Coding)加速Web前端开发"><i class="fa fa-digg " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://www.tumblr.com/share/link?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&name=使用Emmet(前身Zen Coding)加速Web前端开发&description="><i class="fa fa-tumblr " aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://connect.qq.com/widget/shareqq/index.html?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&title=&source=&desc=&pics="><i class="fa fa-qq " aria-hidden="true"></i></a></li> -->

</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#安装Emmet插件"><span class="toc-number">1.</span> <span class="toc-text">安装Emmet插件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#它是如何工作的？"><span class="toc-number">2.</span> <span class="toc-text">它是如何工作的？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Emmet和HTML"><span class="toc-number">3.</span> <span class="toc-text">Emmet和HTML</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Emmet和CSS"><span class="toc-number">4.</span> <span class="toc-text">Emmet和CSS</span></a></li></ol>
    </div>
  </span>
</div>

    
    <div class="content index width mx-auto px2 my4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        使用Emmet(前身Zen Coding)加速Web前端开发
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">iiitoo</span>
      </span>
      
    <div class="postdate">
        <time datetime="2014-11-28T06:50:59.000Z" itemprop="datePublished">2014-11-28</time>
    </div>


      
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/tags/网建随记/">网建随记</a>
    </div>


    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <p>&#160;</p>
<p>转载：<a href="http://www.zjgsq.com/" target="_blank" rel="external">Web前端开发-Web前端工程师</a> » <a href="http://www.zjgsq.com/1062.html" target="_blank" rel="external">使用Emmet(前身Zen Coding)加速Web前端开发</a></p>
<p><a href="http://emmet.io/" target="_blank" rel="external">Emmet</a>插件以前被称作为Zen Coding，是一个文本编辑器的插件，它可以帮助您快速编写HTML和CSS代码，从而加速Web前端开发。早在2009年，Sergey Chikuyonok写过一篇文章，提出编写HTML和CSS的新方法。这一革命性的插件指的就是Zen Coding，经过很多开发者多年来的努力与帮助，现在已达到了一个新的水平。也就是今天所说的Emme插件。<br>在这篇文章中，我们将要学习如何使用Emmet语法来生成HTML和CSS代码。</p>
<h4 id="安装Emmet插件"><a href="#安装Emmet插件" class="headerlink" title="安装Emmet插件"></a>安装Emmet插件</h4><p> </p><p>Emmet只是文本编辑器一个插件，要想让他发挥应用的功能，就得将其安装到你喜欢的文本编辑器中。到目前为止，很多流行的文本编辑器都支持Emmet插件，也就是说很多流行的文本编辑器都可以安装这款插件。 </p><p>点击下面的链接，按照说明文档可以给对应的文本编辑器安装Emmet插件：</p>
<ul>
<li><a href="https://github.com/sergeche/emmet-sublime#readme" target="_blank" rel="external">Sublime Text</a> </li><li><a href="https://github.com/emmetio/emmet-eclipse#readme" target="_blank" rel="external">Eclipse</a> </li><li><a href="https://github.com/emmetio/Emmet.tmplugin#readme" target="_blank" rel="external">TextMate</a> </li><li><a href="https://github.com/emmetio/Emmet.codaplugin#readme" target="_blank" rel="external">Coda</a> </li><li><a href="https://github.com/emmetio/Emmet.sugar#readme" target="_blank" rel="external">Espresso</a> </li><li><a href="https://github.com/sergeche/emmet.chocmixin#readme" target="_blank" rel="external">Chocolat</a> </li><li><a href="https://github.com/emmetio/npp#readme" target="_blank" rel="external">Notepad++</a> </li><li><a href="https://github.com/emmetio/brackets-emmet#readme" target="_blank" rel="external">Brackets</a> </li><li><a href="https://github.com/emmetio/netbeans#readme" target="_blank" rel="external">NetBeans</a> </li><li><a href="https://github.com/emmetio/dreamweaver#readme" target="_blank" rel="external">Adobe Dreamweaver</a></li>
</ul>
<h4 id="它是如何工作的？"><a href="#它是如何工作的？" class="headerlink" title="它是如何工作的？"></a>它是如何工作的？</h4><p> </p><p>在Web前端开发中，我们不得不面对一个残酷的现实。在写HTML代码时需要一定的时间，因为我们要花大把的时间写HTML标签，属性，引号等；同样在编写CSS时，我们要写很多的属性、属性值，大括号和分号等。当然，大多数的文本编辑器都或多或少带有代码自动提示功能，在开发之时，帮了很大的忙，但仍然需要人工输入很多代码。而Emmet插件，集成了很多缩写，大家在开发时只需要输入简单的缩写，按tab键或ctrl+E键就能扩展出所需的代码片段。</p>
<h4 id="Emmet和HTML"><a href="#Emmet和HTML" class="headerlink" title="Emmet和HTML"></a>Emmet和HTML</h4><p> </p><p>假定你已经为您自己喜欢的文本编辑器成功的安装好了Emmet插件，接下来我们来简单的看看如何使用Emmet帮助您快速编写您的HTML标签。 </p><p>Emmet使用定义的缩写来生成元素。他的语法和CSS的选择器非常类似：<pre>ul&gt;li&gt;img+p</pre></p>
<p></p><p>一旦你写好缩写之后，按一下tab键(我使用的是Sublime Text编辑器)就能生成你所请求的代码。上面的例子将会产生下面的代码：<pre>&lt;ul&gt;<br>    &lt;li&gt;<br>        &lt;img src=”” alt=””&gt;<br>        &lt;p&gt;&lt;/p&gt;<br>    &lt;/li&gt;<br>&lt;/ul&gt;</pre></p>
<p></p><p><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-1.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-1.gif" alt="element-1"></a><br>接下来，让我们来深入一点了解Emmet语法，来看看如何通过一些更复杂的缩写创建HTML标签。<br><strong>创建初始文档</strong><br>任何一个HTML文件，都具有一些默认的文档结构。使用Emmet来创建需要的时间不到一秒。只要输入!或html:5，然后点击tab键，你就会看到一个HTML5的doctype默认标签。</p>
<p></p><p>html:5或!：HTML5文档类型<br>html:xt：XHTML过渡型文档类型<br>html:xs：XHTML严格型文档类型<br>html:4t：HTML4过渡型文档类型<br>html:4s：HTML4严格型文档类型<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-dtd.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-dtd.gif" alt="element-dtd"></a><br><strong>子元素&gt;</strong><br>使用&gt;运算符可以用来生成彼此嵌套的元素：<pre>section&gt;div&gt;p</pre><pre>&lt;section&gt;<br>    &lt;div&gt;<br>        &lt;p&gt;&lt;/p&gt;<br>    &lt;/div&gt;<br>&lt;/section&gt;</pre></p>
<p></p><p><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-2.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-2.gif" alt="element-2"></a><br><strong>相邻元素+</strong><br>使用+运算符可以用来生成彼此相邻的元素：<pre>section+div+p</pre></p>
<p></p><p>上面代码会生成下面的代码：</p>
<p></p><p><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-3.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-3.gif" alt="element-3"></a><br><strong>返回上一层^</strong><br>使用^运算符，可以让你的代码返回上一层。当你使用&gt;嵌套元素时，想让后面的回到上一层，那么这个方法很适用。<pre>section&gt;div&gt;p&gt;a^p</pre></p>
<p></p><p>这个缩写将两个段落元素都放置在div内，但只有第一个段落里会包含一个链接。<pre>&lt;section&gt;<br>    &lt;div&gt;<br>        &lt;p&gt;&lt;a href=””&gt;&lt;/a&gt;&lt;/p&gt;<br>        &lt;p&gt;&lt;/p&gt;<br>    &lt;/div&gt;<br>&lt;/section&gt;</pre></p>
<p></p><p><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-4.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-4.gif" alt="element-4"></a><br>其实这个就相当于：<pre>section&gt;div&gt;(p&gt;a)+p</pre></p>
<p></p><p><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-climb-up.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-climb-up.gif" alt="element-climb-up"></a><br><strong>乘法*</strong><br>如果你想一次性生成多个相同的元素，比如列表中的li，那么就可以使用乘法运算符<em>:<pre>ul&gt;li</pre></em>5</p>
<p></p><p>上面代码会生成不个li：<pre>&lt;ul&gt;<br>    &lt;li&gt;&lt;/li&gt;<br>    &lt;li&gt;&lt;/li&gt;<br>    &lt;li&gt;&lt;/li&gt;<br>    &lt;li&gt;&lt;/li&gt;<br>    &lt;li&gt;&lt;/li&gt;<br>&lt;/ul&gt;</pre></p>
<p></p><p><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-5.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-5.gif" alt="element-5"></a>除了能一次性生成多个相同的标签之外，我们还可以通过$符号做递增；通过$@-符号做递减；通过$@3<em>5这样的方式从第三个开始命名：<a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-21.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-21.gif" alt="element-21"></a><strong>组合</strong> 为了更有效的利用嵌套，我们常会制作一些代码片段。在Emmet中你可以通过()将一个块组合在一起，来看一个简单的示例：<pre>ul&gt;(li&gt;a)</pre></em>3</p>
<p></p><p>上面的代码就会生成3个li，而且每个li中套了一个a:<pre>&lt;ul&gt;<br>    &lt;li&gt;&lt;a href=””&gt;&lt;/a&gt;&lt;/li&gt;<br>    &lt;li&gt;&lt;a href=””&gt;&lt;/a&gt;&lt;/li&gt;<br>    &lt;li&gt;&lt;a href=””&gt;&lt;/a&gt;&lt;/li&gt;<br>&lt;/ul&gt;  </pre></p>
<p></p><p>在我们一个页面中，常会包括页头、主体和页脚三个部分，我们很多时候就可以通过对全们进行一个组合，快速生成有效的代码：<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-6.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-6.gif" alt="element-6"></a><br><strong>快速添加类名、ID、文本和属性</strong><br>在Emmet中，还有一个功效，能快速帮助你添加类名、ID、文本和属性。</p>
<p></p><p>使用E#ID添加ID名<br>使用E.class添加类名<br>使用E[attr]添加属性<br>使用E{text}添加文本<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-22.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-22.gif" alt="element-22"></a><br><strong>省略标签名</strong><br>在Emmet中可以省略标签名，默认情况下，如.item和div.item起到的作用是一致的<pre>&lt;div class=”item”&gt;&lt;/div&gt;</pre></p>
<p></p><p>在实际中还有几种情况：</p>
<p></p><p>ul和 ol中输入指的是li<br>table、tbody、thead和tfoot指的是tr<br>tr中指的是td<br>select和optgroup指的是option<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-23.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-23.gif" alt="element-23"></a></p>
<h4 id="Emmet和CSS"><a href="#Emmet和CSS" class="headerlink" title="Emmet和CSS"></a>Emmet和CSS</h4><p></p><p><strong>属性</strong><br>CSS提供了属性的值，比如font-size，margin和 padding等等：<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/emment-1.jpg" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/emment-1.jpg" alt="emment-1"></a><br>Emmet定义了所有已知的CSS属性和缩写。所以border-bottom缩写是bdb，border-top缩写是bdt。正如下面的示例font-size缩写是fz：</p>
<p></p><p>假设你在你的编辑器中输入fz，然后按一下tab键，Emmet就像一个魔法师一样将缩写变成有效的CSS，并且放在你的光标之处。<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-13.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-13.gif" alt="element-13"></a><br><strong>属性值</strong><br>现在我们已经了解了CSS的属性，它只需要添加一个值。这是通过一个组合缩写和所需要的值一起来完成。例如，fz18将输出font-size:18px。你不需要输入px，因为Emmet将会其单位是px。如果一个项目没有一个单位（如font-weight），Emmet会很聪明，他不会添加像素单位。<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-14.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-14.gif" alt="element-14"></a><br><strong>单位</strong><br>如果你在CSS不经常使用的像素(px)单位，那会是什么？是em、rem、%、ex和px吗？那么这些单位在Emmet中都是可以使用的。在Emmet中每一个单位都有其缩写形式：</p>
<p></p><p>px→ 默认<br>p→ %<br>e→ em<br>r→ rem<br>x→ ex<br>要使用一个单位，只需要在值的后面使用缩写的单位值。下面的例子是使用em定义font-size：<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-15.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-15.gif" alt="element-15"></a><br><strong>多个单位</strong><br>CSS中的某些属笥，比如margin，允许多个值。在Emmet中要做到这一点，只需要每个值之间使用破折号(-)。来看看下面的例子，给body定义margin的四个值：<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-16.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-16.gif" alt="element-16"></a><br><strong>颜色</strong><br>在Emmet中使用#前缀，后面紧跟颜色值，但不同的字符数将会输出不同的十六进制代码。来看一些例子：</p>
<p></p><p>＃1→ ＃111111<br>＃E0→ ＃e0e0e0<br>＃FC0→ ＃FFCC00<br>下面定义通过c#2定义body的颜色值，将会输出#222：<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-17.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-17.gif" alt="element-17"></a><br><strong>!important</strong><br>尽管在CSS中!important并不经常使用，但在Emmet也带有一定的缩写。添加!就可以自动生成：<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-18.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-18.gif" alt="element-18"></a><br><strong>多属性</strong><br>现在我们具Emmet的CSS特性的一个基本了解，也是将它们放在一起的时候。就类似于Emmet和HTML中的相邻元素的功能。可以使用加号+运算符来创建多个属性。我们来看一个简单的示例：<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-19.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-19.gif" alt="element-19"></a><br><strong>示例</strong><br>记住，你可以使用所有缩写或者将其分开。这并不是很重要，关键的是你要使用得正确，它能更容易让你编写你的CSS。这里有一个动画，他给div.panel创建一些样式：<br><a href="http://www.zjgsq.com/wp-content/uploads/2013/12/element-20.gif" target="_blank" rel="external"><img src="http://www.zjgsq.com/wp-content/uploads/2013/12/element-20.gif" alt="element-20"></a><br><strong>总结</strong><br>Emmet是一个强大的工具，也被称为是一款高速的编码工具，它可以让你花更少的时间做同样的事情，而无需手动创建自己的代码片段。Emmet的灵感来自于CSS选择器以及可以用于所有主要的文本编辑器，以适应开发者的工作流程。</p>
<p></p><p>请记住，你可以在你的工作流中添加任何新工具，这个学习过程也是一个曲线的过程，但你不要花费更多的时间做那些相同的事情。你只是需要定期的访问<a href="http://docs.emmet.io/cheat-sheet/" target="_blank" rel="external"> Emmet文档</a>，你就会慢慢熟悉Emmet中HTML和CSS的所有特性。让你少想，少写，实现更多想要的代码。</p>

  </div>
</article>



    </div>
    
      <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">首</a></li>
         
          <li><a href="/about/">关于这</a></li>
         
          <li><a href="/reading/">读什么</a></li>
         
          <li><a href="/book/">写本书</a></li>
         
          <li><a href="/categories/blog/">写博客</a></li>
         
          <li><a href="/categories/learning/">做什么</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#安装Emmet插件"><span class="toc-number">1.</span> <span class="toc-text">安装Emmet插件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#它是如何工作的？"><span class="toc-number">2.</span> <span class="toc-text">它是如何工作的？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Emmet和HTML"><span class="toc-number">3.</span> <span class="toc-text">Emmet和HTML</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Emmet和CSS"><span class="toc-number">4.</span> <span class="toc-text">Emmet和CSS</span></a></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
    <!-- <li class="social-share share-component" data-sites="facebook"></li> -->
    <li class="social-share share-component" data-sites="wechat"></li>
    <li class="social-share share-component" data-sites="qq"></li>
    <li class="social-share share-component" data-sites="twitter"></li>
    <li class="social-share share-component" data-sites="weibo"></li>
    <li class="social-share share-component" data-sites="tencent"></li>
    <li class="social-share share-component" data-sites="qzone"></li>
    <li class="social-share share-component" data-sites="douban"></li>
    <li class="social-share share-component" data-sites="diandian"></li>
    <li class="social-share share-component" data-sites="google"></li>
    <li class="social-share share-component" data-sites="linkedin"></li>
    <li class="social-share share-component" data-sites="qzone"></li>
    <!-- <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&title=使用Emmet(前身Zen Coding)加速Web前端开发"><i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&is_video=false&description=使用Emmet(前身Zen Coding)加速Web前端开发"><i class="fa fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="mailto:?subject=使用Emmet(前身Zen Coding)加速Web前端开发&body=Check out this article: https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="https://getpocket.com/save?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&title=使用Emmet(前身Zen Coding)加速Web前端开发"><i class="fa fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://reddit.com/submit?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&title=使用Emmet(前身Zen Coding)加速Web前端开发"><i class="fa fa-reddit fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://www.stumbleupon.com/submit?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&title=使用Emmet(前身Zen Coding)加速Web前端开发"><i class="fa fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://digg.com/submit?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&title=使用Emmet(前身Zen Coding)加速Web前端开发"><i class="fa fa-digg fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://www.tumblr.com/share/link?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&name=使用Emmet(前身Zen Coding)加速Web前端开发&description="><i class="fa fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
    <li><a class="icon" href="http://connect.qq.com/widget/shareqq/index.html?url=https://iiitoo.com/2014/11/28/使用Emmet(前身Zen Coding)加速Web前端开发/&title=&source=&desc=&pics="><i class="fa fa-qq fa-lg" aria-hidden="true"></i></a></li> -->

</ul>

    </div>

    <div id="actions-footer">
      <ul>
        <li id="toc"><a class="icon" href="#" onclick='$("#toc-footer").toggle();return false;'><i class="fa fa-list fa-lg" aria-hidden="true"></i> TOC</a></li>
        <li id="share"><a class="icon" href="#" onclick='$("#share-footer").toggle();return false;'><i class="fa fa-share-alt fa-lg" aria-hidden="true"></i> Share</a></li>
        <li id="top" style="display:none"><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa fa-chevron-up fa-lg" aria-hidden="true"></i> Top</a></li>
        <li id="menu"><a class="icon" href="#" onclick='$("#nav-footer").toggle();return false;'><i class="fa fa-bars fa-lg" aria-hidden="true"></i> Menu</a></li>
      </ul>
    </div>

  </div>
</div>

    
    <footer id="footer">
  <div class="footer-left">
    Copyright &copy; 2017 iiitoo
  </div>
  <div class="footer-right">
    <nav>
      <ul>
         
          <li><a href="/">首</a></li>
         
          <li><a href="/about/">关于这</a></li>
         
          <li><a href="/reading/">读什么</a></li>
         
          <li><a href="/book/">写本书</a></li>
         
          <li><a href="/categories/blog/">写博客</a></li>
         
          <li><a href="/categories/learning/">做什么</a></li>
        
      </ul>
    </nav>
  </div>
</footer>

</body>
</html>
<!-- jquery -->
<script src="/lib/jquery/jquery.min.js"></script>
<script src="/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/lib/share/js/jquery.share.js"></script>
<script src="/lib/justified-gallery/jquery.justifiedGallery.min.js"></script>
<script src="/js/main.js"></script>
<!-- Google Analytics -->

<!-- Disqus Comments -->


